今天是中秋節,祝大家中秋節快樂,今天要介紹的主題,雖然篇幅不多,但也是一個很重要的技巧。
在我們開發元件的時候,除了畫面重複需要抽離外,有時候參數也可以共享,例如元件的樣式統一由外部管理,但如果是用之前的父子溝通技巧來實作,就會顯得相當麻煩,此時第二種溝通技巧就派上用場了。
級聯值和參數提供一個便利的方式,讓元件能夠提供值給底下的所有子元件,只需要兩個步驟:
CascadingValue
元件如:<CascadingValue Name="CascadeParam1"
Value="CascadeParam1">
<Child></Child>
</CascadingValue>
CascadingParameter
屬性如:[CascadingParameter(Name = "CascadeParam1")]
protected string CascadeParam1 { get; set; }
這樣一來只要有元件使用 CascadingValue
元件來設定值,在 CascadingValue
元件底下所有的子元件都能夠準確接收其內容,是不是很簡單呀!但實際上的行為是,參數如果加了 CascadingParameter
屬性變成級聯參數,則會自動依照規則從上層元件中找到對應的級聯元件,並取得其值。
這邊重點介紹幾個 CascadingValue
元件的屬性成員:
Name(string) - 選填,設定名稱,通過指定名稱,使後代組件能夠接收值;如果未指定名稱,則子代組件將根據它們所請求的類型來接收值。
Value(TValue) - 提供的值。
IsFixed(Boolean) - 如果為 true,則表示在元件的生命週期內 Value 不會更改;用於性能優化,使框架跳過設定的更改通知,用於此情況才會特別標識。
而 CascadingParameter
屬性就很簡單,只有一個屬性 Name
:
設定時,規則為尋找名稱相同且最接近的 CascadingValue
元件。
沒有設定時,規則為尋找型別相同且最接近並且沒有命名的 CascadingValue
元件。
只要掌握這個規則,在撰寫時就不會有搞不清楚的狀況了。
以上就是使用級聯值與參數的方法了,若想看範例程式可以到範例程式碼 - day16觀看。
感謝大家的閱讀,我們明天見。
參考資料
ASP.NET Core Blazor 級聯值和參數